{% extends 'layout.html' %}
{% load static %}

{% block content %}
    <div class="container-fluid" style="margin-top: 20px;">

        <div class="col-md-12">
            <div class="panel panel-info mystyle-panel">
                <div class="panel-heading">
                    用户列表
                    {% csrf_token %}
                    <a class="pull-right btn btn-success" href="{% url 'user_add' %}"
                       style="margin-top: -8px">添加用户</a>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr class="success">
                            <th>序号</th>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>邮箱</th>
                            <th>手机号</th>
                            <th>创建时间</th>
                            <th>角色</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for user in user_list %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ user.pk }}</td>
                                <td>{{ user.username }}</td>
                                <td>{{ user.get_gender_display }}</td>
                                <td>{% if user.age == 0 %}{% else %}{{ user.age }}{% endif %}</td>
                                <td>{% if user.email == None %}{% else %}{{ user.email }}{% endif %}</td>
                                <td>{% if user.phone == None %}{% else %}{{ user.phone }}{% endif %}</td>
                                <td>{{ user.createDateTime }}</td>
                                <td><a class="btn btn-info" href="{% url 'user_lookRole' user.pk %}">查看{{ user.username }}的角色</a></td>
                                <td>
                                    <a href="{% url 'user_edit' user.pk %}"><i
                                            class="fa fa-edit fa-fw fa-lg"></i></a>
                                    <a style="color:red;"><i class="fa fa-trash-o fa-fw fa-lg"
                                                             url="{% url 'user_del' user.pk %}"></i></a>
                                </td>
                            </tr>
                        {% endfor %}

                        </tbody>
                    </table>
                    {{ page_html }}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block js %}
    <script src="{% static 'js/ajax_setup.js' %}"></script>
    <script>
        $('.fa-trash-o').click(function () {
            swal({
                title: "你确定要删除吗？",
                text: "数据一旦删除，将无法恢复！",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
                .then((willDelete) => {
                    if (willDelete) {
                        $.ajax({
                            url: $(this).attr('url'),
                            type: 'post',
                            success: (ret) => {
                                if (ret.status === 0) {
                                    swal("哇哦，数据删除成功！", {
                                        icon: "success",
                                    });
                                    $(this).parent().parent().parent().remove()
                                } else {
                                    if (ret.msg) {
                                        swal(ret.msg)
                                    } else {
                                        swal(ret)
                                    }
                                }
                            },
                            error: function (ret) {
                                swal('error:' + ret)
                            }
                        });
                    } else {
                        swal("数据没有被删除！");
                    }
                });
        });
    </script>
{% endblock %}